Container
Description
There are a number of sub-control types available for use as a container:
- Name
- Description
- Absolute Layout Container
Container for explicitly positioning controls.
- Alignment Container
The Alignment container can be used to left, center, or right align groups of controls.
- ButtonGroup Container
Used to group multiple buttons together such that they appear as a single control
- Card, CardNavigator, CardHeader and CardFooter Containers
Create animated transitions between screens using Card containers.
- ControlGroup Container
Controls in a ControlGroup container are rendered using a mobile style.
- CSSGrid Container
Allows you to position controls in a grid of rows and columns to easily define complex, responsive layouts.
- Editor Container
Used to create Editor Sets for the FormView Control.
- EditorSet Container
Used to contain one or more Editors.
- FlexLayout Container
Used to define the width of controls on a single line.
- Injectible Content
Contains controls and other elements that can be "injected" into other locations in a UX Component, such as a DIV or List Footer.
- NoFloat Container
Controls in this container are not wrapped in a div when rendered.
- PanelFooter Container
Defines a footer for a Panel.
- PanelHeader Container
Defines a header for Panel.
- PanelOverlay Container
Creates a Panel shown on demand that renders in fixed location.
- RepeatingSection Container
Used to create a repeating section.
- SpinListGroup Container
Groups Spin List controls together, creating a single, complex 'spin list'.
- Window Container
Places controls in a Window container
To learn more about the different container types, watch the video below:
Videos
Responsive Design - Dynamically Resizing Controls on Orientation or Window Size Change - Understanding the FlexLayout Container
A common requirement when designing a UX component is to have a control dynamically resize when the orientation of a mobile device changes or when the window size (in a desktop browser) changes. This is easily accomplished using the FlexLayout container on a UX.
Any of the controls in a FlexLayout container can have their width specified as a 'relative' size (relative to the size of the other controls in the FlexLayout container). This video shows how to use the FlexLayout container type.
Using Card and CardNavigator Containers to Create Animated Transitions
A common UI pattern in web applications is to create animated transitions between different content areas.
In this video, we show how the CardNavigator container can be used to create flip and slide transitions between different content that has been wrapped in Card containers.
Creating Complex Responsive Layouts using the CSSGrid Container
The CSS grid specification allows you to create complex responsive layouts. In this video we show how you can use a CCSGrid container type to create a complex, responsive layout.